<template>
  <v-row align="start" justify="end">
    <v-col cols="7" class="text-center px-0">
      <v-btn-toggle
        v-if="moveDistance"
        mandatory
        dense
        v-model="moveDistance"
        class="d-inline-block"
      >
        <app-btn
          v-for="(value, i) in zAdjustValues"
          small
          class="px-1"
          :key="i"
          :disabled="!klippyReady"
          :min-width="36"
          :value="value"
        >
          {{ value }}
        </app-btn>
      </v-btn-toggle>
      <div class="mt-1">
        <span class="secondary--text">{{ $t('app.general.label.z_offset') }}&nbsp;</span>
        <span>{{ ZHomingOrigin }}mm</span>
      </div>
    </v-col>
    <v-col cols="5">
      <app-btn
        @click="sendZAdjustGcode('+', moveDistance, waits.onZAdjust)"
        :loading="hasWait('ZAdjust')"
        :disabled="!klippyReady"
        small>
        <v-icon small class="mx-0">$zUp</v-icon>
      </app-btn>
      <app-btn
        @click="sendZAdjustGcode('-', moveDistance, waits.onZAdjust)"
        :loading="hasWait('ZAdjust')"
        :disabled="!klippyReady"
        small
        class="ml-1">
        <v-icon small>$zDown</v-icon>
      </app-btn>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'
import { Waits } from '@/globals'

@Component({})
export default class ZHeightAdjust extends Mixins(StateMixin) {
  waits = Waits
  moveDistance: number | null = null

  get ZHomingOrigin () {
    // This is an array of 4 values, representing the homing origin.
    // It should be in the order of; X, Y, Z, E.
    if (
      this.$store.state.printer.printer.gcode_move.homing_origin &&
      this.$store.state.printer.printer.gcode_move.homing_origin.length >= 4
    ) {
      const origin = this.$store.state.printer.printer.gcode_move.homing_origin[2]
      return origin.toFixed(3)
    } else {
      return null
    }
  }

  get zAdjustValues () {
    return this.$store.state.config.uiSettings.general.zAdjustDistances
  }

  mounted () {
    this.moveDistance = this.zAdjustValues[0]
  }

  /**
   * Send a Z adjust gcode script.
   */
  sendZAdjustGcode (direction: '+' | '-', distance: string, wait?: string) {
    const zHomed = this.$store.getters['printer/getHomedAxes']('z')
    const gcode = `SET_GCODE_OFFSET Z_ADJUST=${direction}${distance} MOVE=${+zHomed}`
    this.sendGcode(gcode, wait)
  }
}
</script>
